<template>
	<view class="container">
		<view class="postx" :style="scrollTop>0?'background:#FFF;':''">
			<view :style="'height:'+statusBarHeight+'px'"></view>
			<view class="flexJusp" style="font-size: 36rpx;font-weight: bold;text-align: center;padding:0 20rpx;"
				:style="'height:'+navigationBarHeight+'px;line-height:'+navigationBarHeight+'px'">
				<view></view>
				<view>立即下单</view>
				<view></view>
			</view>
		</view>
		<view style="width: 750rpx;height: 650rpx;background: linear-gradient(228deg, #81CBFF,#F0F6FA);">
			<view :style="'height:'+statusBarHeight+'px'"></view>
			<view :style="'height:'+navigationBarHeight+'px'"></view>
			<view style="text-align: right;">
				<image style="width:29rpx;height:35rpx;margin:28rpx 38rpx 30rpx 0 ;" src="/static/image/01_fv.png"></image>
			</view>
			<view style="text-align: center;font-size: 30rpx;">您要选择的下单模式</view>
      <view @click="detail(0)" class="flex"
            style="width: 710rpx;height: 148rpx;background:linear-gradient(180deg,#E9F6FE,#F5FCFE);border-radius: 24rpx;margin:28rpx auto 0;">
				<image style="width:84rpx;height:84rpx;margin:32rpx 16rpx 0 24rpx;" src="/static/image/03_wd.png"></image>
				<view style="width:586rpx;">
					<view class="flexJusp">
						<view style="font-size: 28rpx;font-weight: bold;padding:16rpx 0 0;">一口价下单</view>
<!--						<view style="width: 160rpx;height: 36rpx;background: linear-gradient(180deg, #11C3EF, #2089FF 100%);border-radius: 0rpx 24rpx 0rpx 24rpx;font-size: 20rpx;color: #FFFFFF;line-height: 36rpx;text-align: center;">下单送优惠券</view>-->
					</view>
					<view style="font-size: 24rpx;color: #333333;width:562rpx;line-height:36rpx;">全国统一标准价，支付后，师傅立即接单与客户预约上门服务。</view>
				</view>
			</view>

      <view @click="detail(1)" class="flex"
            style="width: 710rpx;height: 148rpx;background:linear-gradient(180deg,#F4FAFE,#FBFCFE);border-radius: 24rpx;margin:28rpx auto;">
				<image style="width:84rpx;height:84rpx;margin:32rpx 16rpx 0 24rpx;" src="/static/image/03_gbgg.png"></image>
				<view style="width:586rpx;">
					<view class="flexJusp">
						<view style="font-size: 28rpx;font-weight: bold;padding:16rpx 0 0;">报价下单</view>
<!--						<view style="width: 160rpx;height: 36rpx;background: linear-gradient(180deg, #11C3EF 0%, #2089FF 100%);border-radius: 0rpx 24rpx 0rpx 24rpx;font-size: 20rpx;color: #FCFCFD;line-height: 36rpx;text-align: center;">下单送优惠券</view>-->
					</view>
					<view style="font-size: 24rpx;color: #333333;width:562rpx;line-height:36rpx;">成功发布报价订单，多个师傅报价，择优选用师傅，支付后，师傅立即接单预约客户上门服务。</view>
				</view>
			</view>
      <view @click="detail(2)" class="flex"
            style="width: 710rpx;height: 148rpx;background: #FFF;border-radius: 24rpx;margin:0 auto;">
				<image style="width:84rpx;height:84rpx;margin:32rpx 16rpx 0 24rpx;" src="/static/image/03_tyjh.png"></image>
				<view style="width:586rpx;">
					<view class="flexJusp">
						<view style="font-size: 28rpx;font-weight: bold;padding:16rpx 0 0;">悬赏下单</view>
<!--						<view style="width: 160rpx;height: 36rpx;background: linear-gradient(180deg, #11C3EF 0%, #2089FF 100%);border-radius: 0rpx 24rpx 0rpx 24rpx;font-size: 20rpx;color: #FFFFFF;line-height: 36rpx;text-align: center;">下单送优惠券</view>-->
					</view>
					<view style="font-size: 24rpx;color: #333333;width:562rpx;line-height:36rpx;">价格自己定，支付后，师傅立即接单预约客户上们服务。</view>
				</view>
			</view>
      <view @click="detail(3)" class="flex"
            style="width: 710rpx;height: 156rpx;background: linear-gradient(168deg, #CAF5FF 0%, #B1D6FF 100%);border-radius: 24rpx;margin:46rpx auto 0;position: relative;">
				<image style="height:130rpx;margin:26rpx 30rpx 0 26rpx;" mode="heightFix" :src="this.$loadImage('fenshiTip')"></image>
				<view>
					<view style="font-size: 32rpx;font-weight: bold;color: #2089FF;padding:30rpx 0 10rpx;">分时零工</view>
					<view style="font-size: 26rpx;color: #656565;">按时间付费，工作内容、价格自己定</view>
				</view>
<!--				<image style="width:210rpx;height:52rpx;position: absolute;top:-30rpx;left:80rpx;" src="/static/image/03_nj.png"></image>-->
<!--				<view style="width:210rpx;height:44rpx;position: absolute;top:-30rpx;left:80rpx;line-height:44rpx;text-align: center;font-size: 22rpx;color: #FFFFFF;">下单送优惠券哦~</view>-->
			</view>
      <view @click="detail(4)" class="flex" style="width: 710rpx;height: 156rpx; margin:46rpx auto 0;">
        <image style="width: 100%; height: 100%;" src="../../static/icon_place_order.jpg" mode=""></image>
			</view>
		</view>
		<view style="height:env(safe-area-inset-bottom);"></view>
		<view class="tabbar">
			<view class="flexJusp">
				<view @click="index">
					<image style="width:44rpx;height:44rpx;" src="/static/image/icon_sy.png"></image>
					<view>首页</view>
				</view>
				<view @click="order">
					<image style="width:44rpx;height:44rpx;" src="/static/image/icon_dd.png"></image>
					<view>订单</view>
				</view>
				<view style="width:130rpx;"></view>
				<view @click="wallet">
					<image style="width:44rpx;height:44rpx;" src="/static/image/icon_qb.png"></image>
					<view>钱包</view>
				</view>
				<view @click="user">
					<image style="width:44rpx;height:44rpx;" src="/static/image/icon_wd.png"></image>
					<view>我的</view>
				</view>
				<image style="width:130rpx;height:130rpx;position: absolute;left:312rpx;top:-44rpx;" :src="this.$loadImage('homeOrderTip')"></image>
				<view style="font-size: 22rpx;color: #FFFFFF;position: absolute;left:332rpx;top:26rpx;">立即下单</view>
			</view>
			<view style="height:env(safe-area-inset-bottom);"></view>
		</view>
	</view>
</template>

<script>
import {systemInfo} from '@/https/mixin.js'

export default {
		mixins: [systemInfo],
		data() {
			return {
				scrollTop:0
			}
		},
		onLoad() {
			this.getSystemInfo()
			uni.hideTabBar()
		},
		onShow() {
			this.checklogin()
		},
		onPageScroll(event) {
			const scrollTop = event.scrollTop // 获取当前页面滚动高度
			this.scrollTop = event.scrollTop
		},
		methods: {
			checklogin(){
				this.$httpapi('selectuserinfo', 'POST', {})
			},
			detail(type) {
				console.log(type);
				this.$httpapi('selectuserinfo', 'POST', {}).then(res=>{
					if(res.code !== 500){
						uni.navigateTo({
							url: '/pages/PlaceOrder/placeOrderDetail/placeOrderDetail?type=' + type
						})
					}
				})
			},
			index(){
				uni.switchTab({
					url:'/pages/index/index'
				})
			},
			order(){
				uni.switchTab({
					url:'/pages/myOrder/myOrder'
				})
			},
			wallet(){
				uni.switchTab({
					url:'/pages/wallet/wallet'
				})
			},
			user(){
				uni.switchTab({
					url:'/pages/user/user'
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #F7F6FA;
	}
	.container {
		padding-bottom:150rpx;
		.postx {
			width: 100%;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 99999999;
		}
		.tabbar {
			position: fixed;
			bottom: 0;
			left: 0;
			z-index: 9999;
			width: 650rpx;
			background-color: #FFF;
			color: #9EA3AE;
			font-size: 24rpx;
			padding: 6rpx 50rpx;
			line-height:36rpx;
			box-shadow: 0px -4px 10px 0px rgba(0, 0, 0, 0.10);
			text-align: center;
		}
	}
</style>
